<template>
  <el-table :data="dataList" border style="width: 99%">
    <el-table-column label="字段名" width="120">
      <template #default="scope">
        <el-input
          v-model="scope.row[props.key1]"
          placeholder="请输入内容"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="对应值" width="120">
      <template #default="scope">
        <el-input
          v-model="scope.row[props.key2]"
          placeholder="请输入内容"
        ></el-input> </template
    ></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          -
        </el-button>
      </template></el-table-column
    >
  </el-table>

  <div class="w-full flex justify-center my-[10px]">
    <el-button size="small" @click="handleEdit"> 增加 </el-button>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
type PropsType = {
  list: any[];
  key1: string;
  key2: string;
};

let props = withDefaults(defineProps<PropsType>(), {
  list: [{ label: "", value: "" }] as any,
  key1: "label",
  key2: "value",
});

// let configArr = [
//   {
//     label: "字段名",
//     prop: "label",
//   },
//   {
//     label: "对应值",
//     prop: "value",
//   },
// ];

let emit = defineEmits(["update:list"]);

let dataList = computed({
  get() {
    return props.list;
  },
  set(val) {
    emit("update:list", val);
  },
});

const handleEdit = () => {
  dataList.value.push({ [props.key1]: "", [props.key2]: "" });
};

const handleDelete = (index: number, row: any) => {
  dataList.value.splice(index, 1);
};
</script>

<style scoped lang="scss"></style>
